<div>
    <el-row :gutter="20">
        <el-col :span="5"><el-button type="primary"
                                     v-if="needAdminRole"
                                  @click="form={};imageUrl='';dialogFormVisible=true" >新建配置 </el-button></el-col>
        <el-col :span="15">
            域名:
                <el-input style="width: 250px" v-model="pageInfo.srch_LIKE_host" placeholder="域名"></el-input>
            企业代码:
            <el-input style="width: 250px" v-model="pageInfo.srch_LIKE_bizCode" placeholder="企业代码"></el-input>
                <el-button type="primary" @click="onSubmit">搜索 </el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%;margin-top: 10px">
            <el-table-column
                    prop="bizCode"
                    label="企业代码">
            </el-table-column>
            <el-table-column
                    prop="host"
                    label="域名">
            </el-table-column>

            <el-table-column
                    prop="type"
                    :formatter="formatConfigType"
                    label="配置类型">
            </el-table-column>

            <el-table-column
                    prop="createBy.name"
                    label="创建人">
            </el-table-column>
            <el-table-column
                    prop="createAt"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="isEnable"
                    :formatter="formatEnable"
                    label="是否启用">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="250">
                <template slot-scope="scope">
                    <!-- <el-button @click="openDetails(scope.row)" type="text" size="small">查看详情</el-button> -->
                    <el-button type="text" size="small" @click="checkConfig(scope.row)">查看配置</el-button>

                    <el-button type="text" size="small" @click="editConfig(scope.row)">编辑配置</el-button>

                    <el-button type="text" size="small" @click="deleteData(scope.row)">删除配置</el-button>

                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <div class="marginT10 center">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    :page-size="pageInfo.pageSize"
                    :total="pageInfo.totalNum"
                    :current-page="pageInfo.currentPage">
            </el-pagination>
    </div>
    <el-dialog title="新建配置" :visible.sync="dialogFormVisible"  width="40%">
        <el-form :model="form">
            <el-form-item label="企业代码：" :label-width="formLabelWidth">
                <el-input v-model="form.bizCode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="访问域名：" :label-width="formLabelWidth">
                <el-input v-model="form.host" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="配置类型：" :label-width="formLabelWidth">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否启用"  :label-width="formLabelWidth">
                <el-switch v-model="form.isEnable"></el-switch>
            </el-form-item>
            <el-form-item v-if="form.type != '05'" label="配置图片：" :label-width="formLabelWidth">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <el-upload
                        name="file"
                        :data="fileData"
                        :headers="uploadHead"
                        class="avatar-uploader"
                        :action="fileAction"
                        :before-upload="beforeUpload"
                        :show-file-list="false"
                        :on-success="handleImgSuccess">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item v-if="form.type == '05'" label="文字配置：" :label-width="formLabelWidth">
                <el-input v-model="form.value" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"  @click="dialogFormVisible=false;save()">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="showEditWin"  width="40%">
        <el-form :model="editForm" :disabled="disableDetailForm">
            <el-form-item label="企业代码：" :label-width="formLabelWidth">
                <el-input v-model="editForm.bizCode" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="访问域名：" :label-width="formLabelWidth">
                <el-input v-model="editForm.host" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="配置类型：" :label-width="formLabelWidth">
                <el-select v-model="editForm.type" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否启用"  :label-width="formLabelWidth">
                <el-switch v-model="editForm.isEnable"></el-switch>
            </el-form-item>
            <el-form-item v-if="editForm.type != '05'" label="配置图片：" :label-width="formLabelWidth">
                <img v-if="editImageUrl" :src="editImageUrl" class="avatar">
                <el-upload
                        name="file"
                        :data="fileData"
                        :headers="uploadHead"
                        class="avatar-uploader"
                        :action="fileAction"    
                        :before-upload="beforeUpload"                    :show-file-list="false"
                        :on-success="handleEditImgSuccess">
                    <i class="el-icon-plus avatar-uploader-icon" v-if="!disableDetailForm"></i>
                </el-upload>

                <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item v-if="editForm.type == '05'" label="文字配置：" :label-width="formLabelWidth">
                <el-input v-model="editForm.value" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="!disableDetailForm">
            <el-button @click="editForm={};showEditWin=false;initData()">取 消</el-button>
            <el-button type="primary"@click="edit">确 定</el-button>
        </div>
    </el-dialog>
</div>